import React, { useEffect, useState } from 'react'
import { NavBar, DotLoading } from 'antd-mobile'
import { useNavigate, useSearchParams } from 'react-router-dom'
import axios from '../../api/http'

function Index() {
  const nav = useNavigate()
  const [sp] = useSearchParams()
  const id = sp.get('id')
  const [data, setData] = useState<any>(null)
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    if (!id) return
    setLoading(true)
    axios.get('/restorative/detail', { params: { id } }).then((res:any) => {
      setData(res?.data || res)
    }).finally(()=> setLoading(false))
  }, [id])

  return (
    <div style={{background:'#fff', minHeight:'100vh'}}>
      <NavBar onBack={()=>nav(-1)}>药品详情</NavBar>
      {loading ? (
        <div style={{display:'flex',justifyContent:'center',padding:'40px 0'}}> <DotLoading /> </div>
      ) : data ? (
        <div style={{padding:'12px'}}>
          <div style={{fontSize:'18px',fontWeight:700}}>{data?.name || data?.title || '商品'}</div>
          <div style={{marginTop:'10px',color:'#ff3b30',fontWeight:700}}>¥{data?.price || data?.salePrice || ''}</div>
        </div>
      ) : (
        <div style={{textAlign:'center',color:'#999',padding:'40px 0'}}>暂无详情</div>
      )}
    </div>
  )
}

export default Index
